<template>
  <div class="w-full">
    <div class="border border-zinc-200">
      <div class="pl-2 text-[#8d8d8d]">
        <span class="cursor-pointer">管理系统 ></span>
        <span class="cursor-pointer">商家管理</span>
      </div>
    </div>
    <div class="m-8 flex flex-col">
      <div class="bg-[#f0f0f0] flex justify-between">
        <div class="flex p-2">
          <div class="flex ml-4">
            <input
              type="text"
              placeholder="请输入商家"
              class="border border-zinc-400 outline-none px-2"
              v-model="searchdata"
              @keydown.enter="search"
            />
            <div class="bg-[#fdc14b] cursor-pointer p-1 px-4" @click="search">
              <img
                src="https://i.postimg.cc/zf1tdxTz/image.png"
                alt=""
                class="w-6"
              />
            </div>
          </div>
          <div
            class="flex justify-center items-center ml-5 bg-[#bbbbbb] text-white rounded-lg"
            v-if="ifshow"
          >
            <button class="py-1 px-3" @click="refreshPage">返回</button>
          </div>
        </div>

        <div class="flex items-center pr-4">
          <p>
            共有商家：<span>{{ busnum }}</span
            >人
          </p>
        </div>
      </div>
      <div class="mt-8">
        <table class="table-flex">
          <tr class="bg-[#f0f0f0]">
            <th class="sm:w-[5%] xl:w-[1%] border border-zinc-300">id</th>
            <th class="sm:w-[6%] xl:w-[3%] border border-zinc-300">商家</th>
            <th class="sm:w-[10%] xl:w-[4%] border border-zinc-300">
              手机号码
            </th>
            <th class="w-[10%] xl:w-[4%] border border-zinc-300">密码</th>
            <th class="w-[15%] xl:w-[15%] border border-zinc-300">商家介绍</th>
            <th class="sm:w-[10%] xl:w-[4%] border border-zinc-300">
              营业时间
            </th>
            <th class="w-[2%] border border-zinc-300">操作</th>
          </tr>
          <tr v-for="item in bus" :key="item.id" class="border border-zinc-300">
            <td class="text-center border border-zinc-300">
              {{ item.vendorId }}
            </td>
            <td class="text-center border border-zinc-300">{{ item.name }}</td>
            <td class="text-center border border-zinc-300">
              {{ item.phone }}
            </td>
            <td class="text-center border border-zinc-300">{{ item.pwd }}</td>
            <td class="text-center border border-zinc-300">
              {{ item.description }}
            </td>
            <td class="text-center border border-zinc-300">
              {{ item.openingTime }}
            </td>
            <td>
              <div class="flex items-center justify-center">
                <img
                  src="https://i.postimg.cc/gJy8ypHH/1.png"
                  alt=""
                  class="sm:w-5 xl:w-8 cursor-pointer"
                  @click="change(item)"
                />
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div class="m-auto" v-if="!ifshow">
        <el-pagination
          :page-size="10"
          :pager-count="6"
          layout="prev, pager, next"
          :total="50"
          @current-change="getPageNum"
        />
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="确认修改" width="30%" draggable>
    <form action="" class="flex flex-col w-full">
      <label for="name" class="m-auto w-4/5">
        用户：
        <input
          id="name"
          type="text"
          :placeholder="oldbus.name"
          v-model="newbus.name"
          class="border border-zinc-300 xl:w-2/3 outline-none"
      /></label>
      <label for="pwd" class="m-auto w-4/5">
        密码：
        <input
          id="pwd"
          type="text"
          class="border border-zinc-300 xl:w-2/3 outline-none"
          :placeholder="oldbus.pwd"
          v-model="newbus.pwd"
        />
      </label>
      <label for="phone" class="m-auto w-4/5">
        手机：
        <input
          id="phone"
          type="text"
          :placeholder="oldbus.phone"
          v-model="newbus.phone"
          class="border border-zinc-300 xl:w-2/3 outline-none"
      /></label>
      <label for="js" class="m-auto w-4/5">
        简介：
        <input
          id="js"
          type="text"
          :placeholder="oldbus.description"
          v-model="newbus.description"
          class="border border-zinc-300 xl:w-2/3 outline-none"
      /></label>
      <label for="address" class="m-auto w-4/5">
        营业：
        <input
          id="address"
          type="text"
          :placeholder="oldbus.openingTime"
          v-model="newbus.openingTime"
          class="border border-zinc-300 xl:w-2/3 outline-none"
      /></label>
    </form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit(index)"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { reactive, computed, ref, onMounted } from "vue";
import axios from "axios";
//修改商家信息
const dialogVisible = ref(false);
let oldbus = ref({});
let newbus = ref({
  name: "",
  phone: "",
  pwd: "",
  description: "",
  openingTime: "",
});
function change(item) {
  dialogVisible.value = true;
  oldbus.value = item;
}
function submit() {
  console.log(newbus.value);
  axios
    .put(
      `http://1.14.126.98:8081/vendor/update?vendorId=${oldbus.value.vendorId}&phone=${newbus.value.phone}&name=${newbus.value.name}&pwd=${newbus.value.pwd}&description=${newbus.value.description}&openingTime=${newbus.value.openingTime}`
    )
    .then((res) => {
      alert(res.data.msg);
      axios
        .get(
          `http://1.14.126.98:8081/vendor/vendorInquire?page=${PageNum.value}&vendor=10&isAsc=true`
        )
        .then((res) => {
          bus.value = res.data.records;
        });
    });
  dialogVisible.value = false;
  newbus.value.pwd = "";
  newbus.value.description = "";
  newbus.value.phone = "";
  newbus.value.name = "";
  newbus.value.openingTime = "";
}
//模糊查询商家
let searchdata = ref("");
function search() {
  axios
    .get(`http://1.14.126.98:8081/user/search?keyword=${searchdata.value}`)
    .then((res) => {
      bus.value = res.data;
      searchdata.value = "";
      ifshow.value = true;
    });
}
//获取商家数据
let bus = ref([]);
onMounted(() => {
  axios
    .get(
      `http://1.14.126.98:8081/vendor/vendorInquire?page=1&vendor=10&isAsc=true`
    )
    .then((res) => {
      bus.value = res.data.records;
    });
});
//分页查询所有商家
let PageNum = ref(1);
function getPageNum(val) {
  PageNum.value = val;
  axios
    .get(
      `http://1.14.126.98:8081/vendor/vendorInquire?page=${PageNum.value}&vendor=10&isAsc=true`
    )
    .then((res) => {
      bus.value = res.data.records;
    });
}
let ifshow = ref(false);
let busnum = computed(() => {
  return bus.value.length;
});
function refreshPage() {
  ifshow.value=false
  axios
    .get(
      `http://1.14.126.98:8081/vendor/vendorInquire?page=1&vendor=10&isAsc=true`
    )
    .then((res) => {
      bus.value = res.data.records;
    });
}
</script>
